/* || General setup */

* {
  box-sizing: border-box;
}

html, body, main, article, header {
  padding: 0;
}

header { 
padding-bottom: 1vw; }

html {
  font-size: 10px;
 /* background-color: #dde;*/
 /* background-color: rgb(225,225,235);*/
 background-color:white;
}

body {
  width: 100%;
  min-width: 320px;
/*  margin: 0 auto 0 auto; */
padding: 0 15% 0 15%;
  background-color: white;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

hr {
  border: 0;
  border-top: 1px solid rgb(150,150,150);
  border-bottom: 2px solid white; 

}


/* TWO column layout - Column container*/
/*  Flex-start allows cols to be unequal height (= contents) but start at same top position */
.row {  
  display: flex;
 /* flex-wrap: wrap;  */
  flex-direction: row;
  align-items: flex-start;
}
/* now the two unequal columns that sit next to each other */
/* Main column */

.left {
  flex: 60%;
  background-color: white;
  padding: 0 ;
}

/* a milddle empty column to create some space - this is dropped on small screens */

.middle {
	  flex: 10%;
  background-color: white;
  padding: 0 ;
}

/* right  column */
.right {
  flex: 30%;
  background-color: rgba(0, 0, 0, 0.04);
  padding: 0 1% 1% 1%;
}

.right p, .landscape p {  
	color: rgb(120 120 120);
	line-height: 1.5;
	font-size: 1.3rem;
	}
	
.right h3 {  
	color: rgb(120 120 120);
	font-size: 2.1rem;
	}

/* Three column layout (with two blank columns) */
/*  five unequal columns that sit next to each other */


.col1 {
  flex: 22%;
  background-color: rgba(0, 0, 0, 0.0); 
  padding: 0 ;
}

/* two empty columns to create some space - this is dropped on small screens */

.col2, .col4 {
  flex: 5%;
  background-color: white;
  padding: 0 ;
}

/* Middle (main) column */
.col3 {
  flex: 44%;
  background-color: white;
  padding: 0 ;
}
.col5 {
  flex: 23%;
  background-color: rgba(0, 0, 0, 0.0);
  padding: 0 0 0 0;
}	

.col1 p, .col5 p {
	color: rgb(120 120 120);
	  line-height: 1.5;
  font-size: 1.3rem;
	}
.col1 h3, .col5 h3 {
	color: rgb(120 120 120);
	  font-size: 2.1rem;
	}
	
.col1 h4, .col5 h4, .right h4{
	margin: 5px 0 20px  0;
	color: rgb(120 120 120);
    font-size: 1.6rem;
	}

.vspace {
  margin: 0 -5% 0 -5%;
	padding:100px 0 0 0;
background-color: white;	
}
.vspace2 {
  margin: 0 -5% 0 -5%;
	padding:150px 0 0 0;
background-color: white;	
}

/* || typography */

.logo{ font-family: 'Macondo', cursive;
  color: #2a2a2a;
  background-color: rgb(240,240,240);
/* background-image: url("../images/strip2.jpg");*/
 background-repeat:no-repeat;
 background-size: cover;
  font-size: 6rem;
  text-align: left;
  line-height: 1;
  padding: 30px 0px 34px 30px;
  margin: 0 0 0 0;
 
}

.byline{ font-family: 'Macondo', cursive;
  color: #2a2a2a;
  font-size: 2.5rem;
  text-align: left;
  line-height: 1;
  padding: 0px 0px 0px 36px;
  margin: -33px 0px 0px 0px;
  
}
	
	
.logoimage{	margin: -110px 20px 0px 0px; 
 padding: 0px 0px 0px 0px;
float:right; 
}

.blurb{font-family: 'Forum', cursive;
  color: #2a2a2a;
  font-size: 1.8rem;
  line-height: 1.5;
  text-align: left;}
  

figcaption{
font-family: 'Open Sans', sans-serif;
 color: #2a2a2a;
 line-height: 1.4;
 font-size: 1.2rem;
  text-align: left;
 padding: 5px 0 0 0;
}

p, input, li, table, label, h1, h2, h3, h4 {
font-family: 'Open Sans', sans-serif;
  color: #2a2a2a;
}
p, input, li, table, label {
font-family: 'Open Sans', sans-serif;
  color: #2a2a2a;
  line-height: 1.7;
  font-size: 1.5rem;
}

h1 {font-size: 3.5rem;
  text-align: Left;
  color: #2a2a2a;
  }

h2 {font-size: 3rem;
  text-align: Left;
  color: #2a2a2a;
  }

h3 {
  font-size: 2.5rem;
  text-align: left;
}

h4 {
  font-size: 2.0rem;
}



/* Footer layout */



footer {
  margin-top: 10px;
}

/* Navigation layout */

 .navbar {
  padding: 0;
  margin: 10px 0 10px 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}


 .navbar a {
  font-family: 'Open Sans', sans-serif;
  color: #2a2a2a;
  outline: none;
  text-decoration: none;
  font-size: 1.5rem;
  padding: 5px 10px 5px 10px; 
  margin: 5px 0px 5px 0px;
  text-align: left;
  line-height: 1;
  color: black;
}

.dropdown { padding: 5px 0 5px 0;
  margin: 5px 0px 5px 0px;
}

 .navbar a:link, nav a:focus {
 /* background: yellow; */
}
 .navbar a:visited {background:green;}

 .navbar a:hover {     
  background: rgba(230,230,230,1);
}

 .navbar a:active {
  background: red;
  color: white;
}


/* Style The Dropdown Button */


.dropdown-content {
  display: none; 
  position: absolute;
  background-color: rgba(240,240,240,1);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
  z-index: 1;
  margin: 0 0 0 0;
}

.dropdown-content a {
  color: black;
 padding: 12px 16px; 
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: rgba(220,220,220,1);}

.dropdown:hover .dropdown-content {
  display: block;
}


/* alternative nav for mobile   - no dropdown - display:none for all screens other than mobile */ 

.nav-mobile {
  padding: 10px 0 0 0; 
  margin: 2% 0 2% 0;
  width: 100%;
  display: flex;
  justify-content: center;
}


 .nav-mobile a {
  font-family: 'Open Sans', sans-serif;
  color: #2a2a2a;
  outline: none;
  text-decoration: none;
  font-size: 1.8rem;
  width: 25%;
  border-radius: 10px;
  padding: 1.5% 2.5% 1.5% 2.5%; 
  margin: 2% 2% 2% 2%; 
 background-color: rgba(0,0,0,0.1);
  text-align: center;
  line-height: 1;
  color: black;
}

 .nav-mobile a:active {
  background: red;
  color: white;
}

.nav-mobile {display: none; }


/*  Layout for Gallery display */

.top-gallery {
  display: flex;
  flex-wrap: wrap;
  background-color: white;
}

.top-gallery div {
  background-color: white;
  width: 200px;
  height: 200px;
  margin: 0px 20px 20px 20px;
  text-align: center;
}

.top-gallery h4 {
	margin: 0 0 0 0;
	padding: 0 0 10px 0;
	font-size: 1.7rem;
}
.top-gallery h3 {
	margin: 0 0 0 0;
	padding: 0 0 10px 0;
	font-size: 2.2rem;
	text-align: center;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  background-color: white;
}

.gallery div {
  background-color: white;
  width: 200px;
  height: auto;
  margin: 0px 20px 20px 20px;
  text-align: center;
}

.gallery p, .top-gallery p, .zoomgallery p { font-family: 'Open Sans', sans-serif;
  color: #2a2a2a;
  line-height: 1.4;
  font-size: 1.3rem;
}

/* adding a shadow makes the gallery thumbs stand out form the page - not sure whether it's good or not */

 /*.gallery img { box-shadow: 4px 4px 6px gray; }  
 .top-gallery img { box-shadow: 4px 4px 6px gray; } */

/* this makes the shadow appear on hover */
.gallery img:hover{ box-shadow: 4px 4px 6px gray; }
.top-gallery img:hover{ box-shadow: 4px 4px 6px gray; }

/* This next bit  magnifies contents of div when hovering over - cheapo alternative to 
individual pages for larger pictures */

.zoomgallery {
  display: flex;
  flex-wrap: wrap;
  background-color: white;
}

.zoomgallery div {
  background-color: white;
  width: 200px;
  height: auto;
  margin: 0px 20px 20px 20px;
  text-align: center;
}
  .zoomgallery img:hover{ transform: scale(2.0); border: 1px solid gray;} 
  .zoom img:hover{ transform: scale(2.0); border: 1px solid gray;} 

/* simple nav bar for gallery pages */

.backbutton {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 50px 0 30px 0;
}

.backbutton a {
  font-family: 'Open Sans', sans-serif;
  color: #2a2a2a;
  outline: none;
  text-decoration: none;
  font-size: 1.5rem;
  padding: 10px 10px 10px 10px; 
  background-color: rgb(240,240,240);
  margin: 15px 25px 15px 25px;
  text-align: center;
  line-height: 1;
  box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.backbutton a:hover { background-color: rgb(200, 200, 200); }


/* more complicated nav bar for gallery pages with prev and next arrows */
.backbutton {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
 margin: 50px 0 30px 0; 
}

.arrow {
  background-color: white;
  color: black;
  text-align: center;
}

.arrow a {
padding: 0 0 0 0; 
margin: 0 0 0 0;
font-size: 4rem; 
text-decoration:none;  
color: white; 
background-color:white; 
box-shadow: none;
text-shadow: -1px -1px 0 #a6a6a6, 1px -1px 0 #a6a6a6, -1px 1px 0 #a6a6a6, 1px 1px 0 #a6a6a6;
padding: 0 30px 0 30px; 
}

.arrow a:hover {background-color: white; color: #a6a6a6; }

.div-middle {
  background-color: white;
  color: white;
  text-align: center;
  display:flex;
  justify-content: center;
}

/* following sets width for landscape view of individual "large view" gallery pages;  note 
size of commentary text = same as right column in two col view, set above in same place */

.landscape {width:80%;
 }

.mobile-only {display: none; }


/* Responsive layout - when the screen is less than 560px wide, make the two columns stack on top of each other instead of next to each other */
/* This has to go at the END and the various media queries in descending order */

 @media screen and (max-width: 1200px) {
    body {  
	padding: 0 10% 0 10%; }
  	html { font-size: 9px;} 
  }

 @media screen and (max-width: 900px) {
    body {  
	padding: 0 5% 0 5%; }
 	html { font-size: 8px;} 
  }

@media screen and (max-width: 560px) {
	body { padding: 0 5% 0 5%; }
 	
  .row { flex-direction: column;}
	html { font-size: 8px;} 
 .logoimage { display: none; } 
 .middle { display: none; }
/* .right { padding: 0 5% 0 5%;  } */
.right { padding: 5% 0 0 0;  background-color: white;}
.right p {	  line-height: 1.7;  font-size: 1.5rem;	}
p {	  line-height: 1.7;  font-size: 1.5rem;	}


/* .navbar { flex-direction: column; } 
 .navbar a { text-align: left;
	padding: 15px 0px 15px 20px; 
	font-size: 1.8rem;}
	.dropdown a { display: block;   
margin: -10px 0 -10px 0;
  width: 100%;}
.dropdown:hover .dropdown-content { display: none; }	*/

.navbar {display: none;}
.nav-mobile {display: flex;}

.col1, .col2, .col4 { display: none; }
.col1 p, .col5 p {
	  line-height: 1.7;
  font-size: 1.5rem;	}
.vspace {display:none; }
.vspace2 {display:none; }

.landscape {width: 100%; }
  .zoomgallery img:hover{ transform: none; border: none} 

/*.mobile-only {display: flex; flex-direction: column; } */
.mobile-only {display: block;}
}